<template>
  <!-- 登录界面 -->

  <div class="full-screen-background">
    <div class="form-container">
      <div class="artistic-italic">
        <span>Welcome to the Billiards Hall</span><br />
        <span class="art">Management System</span>
      </div>
      <form @submit.prevent="login()" class="login-form">
        <div class="row">
          <label for="username" class="ying">用户名:</label>
          <div class="col-sm">
            <input
              type="text"
              class="form-control"
              id="username"
              v-model="username"
            />
          </div>
        </div>
        <div class="row">
          <label for="inputPassword3" class="ying">密码:</label>
          <div class="col-sm">
            <input
              type="password"
              class="form-control"
              id="inputPassword3"
              v-model="password"
            />
          </div>
        </div>
        <div class="button-container">
          <button type="submit" class="btnn">登录</button>
          <button type="button" class="btnn" @click="goToPol()">注册</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
// 安装axios来传后端数据
// npm install axios --save
//导入axios，用它
import { http } from "../utils/http.js";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      http
        .post("/login", { username: this.username, password: this.password })
        .then((res) => {
          console.log(res);
          if (res.status === 200 && res.data === "ok") {
            sessionStorage.setItem("token", "111");
            this.$router.push("/home");
          } else {
            alert("用户名密码不对");
          }
        });
    },
    goToPol() {
      this.$router.push("/adduser");
    },
  },
};

//     login() {
//   http
//     .post("/login", { username: this.username, password: this.password })
//     .then((res) => {
//       console.log(res);
//       if (res.status === 200 && res.data === "ok") {
//         // 假设res.data.user包含用户信息
//         sessionStorage.setItem("token", "111");
//         sessionStorage.setItem("user", JSON.stringify(res.data.user));
//         this.$router.push("/home");
//       } else {
//         alert("用户名密码不对");
//       }
//     });
// },
//   login() {
//   http.post("/login", { username: this.username, password: this.password })
//     .then((res) => {
//       if (res.status === 200 && res.data === "ok") {
//         sessionStorage.setItem("username", this.username);
//         sessionStorage.setItem("token", "111");
//         this.$router.push("/home");
//       } else {
//         alert("用户名密码不对");
//       }
//     });
// }  ,

//   login() {
//   http.post("/login", { username: this.username, password: this.password })
//     .then((res) => {
//       if (res.status === 200 && res.data === "ok") {
//         sessionStorage.setItem("token", "111");
//         sessionStorage.setItem("userPart", res.data.part); // 假设后端返回的用户信息中包含 part 字段
//         this.$router.push("/home");
//       } else {
//         alert("用户名密码不对");
//       }
//     });
// },
</script>
<style scoped>
/* 设置整个页面的背景图片 */

.full-screen-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url("../assets/20.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1; /* 确保内容在上面 */
  /* 可能需要额外的样式来确保内容可以显示在上面 */
}

/* 顶部英文 */
.artistic-italic {
  position: fixed; /* 固定在视口上 */
  top: 0; /* 距离顶部0px */
  left: 0; /* 距离左侧0px */
  color: white; /* 设置文字颜色为白色 */
  font-style: italic; /* 设置文字为斜体 */
  font-size: 30px; /* 设置字号为28px */

  letter-spacing: 2px; /* 设置字间距为2px */
  padding-top: 20px;
  padding-left: 50px;
}
.art {
  padding-left: 300px;
}

/* form表单位置 */
.form-container {
  display: flex;
  justify-content: flex-end; /* 将内容定位到右侧 */
  align-items: center; /* 垂直居中，如果父容器有高度的话 */
  height: 100vh; /* 假设你想让表单在视口高度中居中 */
  /* 如果需要水平方向的更多空间，可以添加左右内边距 */
  padding: 0 20px;
  padding-right: 100px;
}

/* 输入框的样式 */
.form-control {
  width: 250px; /* 设置输入框宽度为250px */
  font-size: 16px; /* 设置输入框的字号 */
  color: #070303; /* 设置输入框的字体颜色 */
  padding: 10px; /* 内边距，根据需要调整 */
  box-sizing: border-box; /* 确保padding和border包含在宽度内 */
}

/* 设置form表单的边框 */
.login-form {
  background-image: url("../assets/41.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #181717; /* 灰色边框 */
  padding: 20px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  width: 300px;
  height: 300px;
}
.row {
  padding: auto;
  padding-bottom: 20px;
}

/* 表单内输入框和文字 */
.row .ying {
  font-size: 16px; /* 设置字号为28px */
  color: white; /* 设置字体颜色为白色 */
  letter-spacing: 2px; /* 设置字间距为2px */
  padding-bottom: 15px;
}

/* 输入框的样式（虽然你的要求只针对label）， */
.row .col-sm .form-control {
  font-size: 12px; /* 设置输入框的字号为28px */
  color: #070303; /* 设置输入框的字体颜色为白色 */
}

/* 按钮样式 */
.button-container {
  /* 使用Flexbox居中按钮 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果父容器有高度的话） */
  color: #ffffff;
  padding-top: 10px;
  /* height: 100px; */
}

/* 自定义按钮样式 */
.btnn {
  width: 180px; /* 设置按钮宽度为80px */
  font-size: 20px;
  color: #d70505;
  letter-spacing: 20px; /* 设置字间距为2px */
  background: none;
  border: none; /* 消除边框 */
  letter-spacing: 2px; /* 或者你想要的任何值 */
}
</style>